
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Zip Code Lookup</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
    <script type="text/javascript" src="scripts/jquery-1.7.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.0.1.js"></script>
    <script type="text/javascript" charset="utf-8">	        	    
	    
    	function postLocation() {

    		var postData = {
    						id: $('#id').val(),
    						phoneid: $('#phoneid').val(),
    						lat: $('#lat').val(),
    						lon: $('#lon').val(),
    						gender: $('#gender').val(),
    						age: $('#age').val(),
    						address: $('#address').val(),
    						city: $('#city').val(),
    						state: $('#state').val(),
    						zipcode: $('#zip').val(),
    						gender: $('#gender').val(),
    						age: $('#age').val()
    						};
    		
    		jstring = JSON.stringify(postData);
    		alert('json:' + jstring);
    		
    		$.ajax({
    			url:'http://wherethechickat.appspot.com/rest/input/postJson/',  
    			type:'POST',
    			data: jstring,
    			dataType: 'json',
    			contentType: "application/json; charset=utf-8",
    			success:function(res){
    			alert("it works!");
    			},
    			error:function(res){
    				alert("Bad thing happend! " + res.statusText);
    			}
    		});
    		
    	}    	    	

    </script>
  </head>
  <body>
  <div data-role="page">
  	<div data-role="header">
  		<a href="index.html" data-icon="delete" data-theme="b">Home</a>
		<h1>Add Location</h1>
		<a href="account.html" data-icon="check" data-theme="b">My Account</a>
  	</div>
  	
  	<div data-role="content">
  		content
  		<br>
	   	<form id="myform" action="#">
	   	<table>
	   	<tr>
	   		<td width="100">id</td>
	   		<td><input type="text" size="5"id="id"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">phone id</td>
	   		<td><input type="text" id="phoneid" value="3232"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">lat</td>
	   		<td><input type="text" id="lat" value="44.86057"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">lon</td>
	   		<td><input type="text" id="lon" value="-93.31602"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">gender</td>
	   		<td><input type="text" id="gender" value="F"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">age</td>
	   		<td><input type="text" id="age" value="25"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">address</td>
	   		<td><input type="text" id="address" value="4217 American Blvd W"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">city</td>
	   		<td><input type="text" id="city" value="BLOOMINGTON"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">state</td>
	   		<td><input type="text" id="state" value="MN"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100">zip</td>
	   		<td><input type="text" id="zip" value="55439"/></td>
	   	</tr>
	   	<tr>
	   		<td width="100"></td>
	   		<td><input type="button" value="submit" onClick="postLocation(); return false;"> </td>
	   	</tr>
	   	</table>
	   	
	    </form>
	</div>
  
  </div>
  </body>
</html>